<script setup>
const userStats = {
  totalPlants: 12,
  healthyPlants: 10,
  needsAttention: 2,
  wateringToday: 3
}

const recentActivities = [
  { date: '2024-03-20', action: '浇水', plant: '绿萝', icon: '💧' },
  { date: '2024-03-19', action: '施肥', plant: '多肉', icon: '🌱' },
  { date: '2024-03-18', action: '修剪', plant: '绿萝', icon: '✂️' }
]

const plantTips = [
  {
    title: '室内植物养护',
    icon: '🏠',
    tips: ['保持适度光照', '控制浇水频率', '定期除尘']
  },
  {
    title: '多肉植物护理',
    icon: '🌵',
    tips: ['充足光照', '少量浇水', '通风良好']
  },
  {
    title: '观花植物管理',
    icon: '🌸',
    tips: ['适时施肥', '修剪整形', '防治病虫害']
  }
]

const weatherInfo = {
  temperature: '23°C',
  humidity: '65%',
  light: '适中',
  watering: '建议浇水'
}
</script>

<template>
  <div class="garden-center">
    <div class="dashboard-grid">
      <!-- 统计卡片 -->
      <div class="stats-card">
        <h2>花园概览</h2>
        <div class="stats-grid">
          <div class="stat-item">
            <span class="stat-icon">🌿</span>
            <div class="stat-info">
              <div class="stat-value">{{ userStats.totalPlants }}</div>
              <div class="stat-label">总植物数</div>
            </div>
          </div>
          <div class="stat-item">
            <span class="stat-icon">✨</span>
            <div class="stat-info">
              <div class="stat-value">{{ userStats.healthyPlants }}</div>
              <div class="stat-label">健康植物</div>
            </div>
          </div>
          <div class="stat-item">
            <span class="stat-icon">⚠️</span>
            <div class="stat-info">
              <div class="stat-value">{{ userStats.needsAttention }}</div>
              <div class="stat-label">需要关注</div>
            </div>
          </div>
          <div class="stat-item">
            <span class="stat-icon">💧</span>
            <div class="stat-info">
              <div class="stat-value">{{ userStats.wateringToday }}</div>
              <div class="stat-label">今日浇水</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 天气信息卡片 -->
      <div class="weather-card">
        <h2>今日环境</h2>
        <div class="weather-info">
          <div class="weather-item">
            <span>🌡️</span>
            <div>
              <div class="weather-value">{{ weatherInfo.temperature }}</div>
              <div class="weather-label">温度</div>
            </div>
          </div>
          <div class="weather-item">
            <span>💧</span>
            <div>
              <div class="weather-value">{{ weatherInfo.humidity }}</div>
              <div class="weather-label">湿度</div>
            </div>
          </div>
          <div class="weather-item">
            <span>☀️</span>
            <div>
              <div class="weather-value">{{ weatherInfo.light }}</div>
              <div class="weather-label">光照</div>
            </div>
          </div>
        </div>
        <div class="weather-suggestion">
          {{ weatherInfo.watering }}
        </div>
      </div>

      <!-- 最近活动 -->
      <div class="activities-card">
        <h2>最近活动</h2>
        <div class="activity-list">
          <div v-for="(activity, index) in recentActivities" 
               :key="index"
               class="activity-item">
            <span class="activity-icon">{{ activity.icon }}</span>
            <div class="activity-info">
              <div class="activity-detail">
                {{ activity.plant }} - {{ activity.action }}
              </div>
              <div class="activity-date">{{ activity.date }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 养护指南 -->
      <div class="tips-card">
        <h2>养护指南</h2>
        <div class="tips-grid">
          <div v-for="(category, index) in plantTips" 
               :key="index"
               class="tip-category">
            <div class="tip-header">
              <span class="tip-icon">{{ category.icon }}</span>
              <h3>{{ category.title }}</h3>
            </div>
            <ul class="tip-list">
              <li v-for="(tip, tipIndex) in category.tips" 
                  :key="tipIndex">
                {{ tip }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.garden-center {
  padding: 1rem;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.stats-card, .weather-card, .activities-card, .tips-card {
  background: white;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

h2 {
  color: #2c3e50;
  margin-bottom: 1.5rem;
  font-size: 1.25rem;
}

/* 统计卡片样式 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: #f8faf7;
  border-radius: 12px;
}

.stat-icon {
  font-size: 2rem;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: bold;
  color: #4CAF50;
}

.stat-label {
  color: #666;
  font-size: 0.9rem;
}

/* 天气卡片样式 */
.weather-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.weather-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.weather-value {
  font-weight: bold;
  color: #4CAF50;
}

.weather-label {
  font-size: 0.9rem;
  color: #666;
}

.weather-suggestion {
  text-align: center;
  padding: 1rem;
  background: #f1f8e9;
  border-radius: 8px;
  color: #4CAF50;
}

/* 活动列表样式 */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem;
  background: #f8faf7;
  border-radius: 8px;
}

.activity-icon {
  font-size: 1.5rem;
}

.activity-date {
  font-size: 0.9rem;
  color: #666;
}

/* 养护指南样式 */
.tips-grid {
  display: grid;
  gap: 1.5rem;
}

.tip-category {
  background: #f8faf7;
  padding: 1.5rem;
  border-radius: 12px;
}

.tip-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.tip-icon {
  font-size: 1.5rem;
}

.tip-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tip-list li {
  color: #666;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tip-list li::before {
  content: '•';
  color: #4CAF50;
}
</style> 